<script setup lang="ts">
import {onMounted, reactive, h, ref} from "vue";
import {NTag, NButton, NDivider, NDropdown} from "naive-ui";
import {Search} from "@vicons/tabler"
import {clone, dateFormat} from "@renderer/utils/index"

const formRef = ref<HTMLFormElement | null>(null);
const rechargeFormRef = ref<HTMLFormElement | null>(null);
const loyaltyFormRef = ref<HTMLFormElement | null>(null);
const searchForm = reactive({
  name: '',
  mobile: '',
  current: 1,
  size: 10
})
let operator = ref('Add')
const showModal = ref(false);
const showDetailModal = ref(false);
const showRechargeModal1 = ref(false);
const showRechargeModal2 = ref(false);
const showAddLoyaltyModal = ref(false)
const showSubLoyaltyModal = ref(false)
let crtMember = ref({
  member: null
});
const modalTitle = ref("添加会员");
let memberDetail = reactive({});
//表单数据
let formData = ref({
  name: '',
  gender: '1',
  age: 18,
  mobile: '',
  birthday: null,
  email: '',
  wechat: '',
  qq: '',
  grade: '',
  enabled: '1'
})
let cardFormData = ref({
  memberid: '',
  balance: 0,
  type: 1
})
let loyaltyFormData = ref({
  memberid: '',
  balance: 0
})
// 校验规则
const rules = reactive({
  name: {
    required: true,
    message: '请输入会员名称',
    trigger: 'blur'
  },
  mobile: {
    required: true,
    message: '请输入会员手机号',
    trigger: 'blur'
  },
  grade: {
    required: true,
    message: '请选择会员等级',
    trigger: 'change'
  },
  enabled: {
    required: true,
    message: '请选择状态',
    trigger: 'change'
  },
})
// 表格数据
let tableData = ref({
  page: [],
  total: 0
})
let grades = reactive([])

const columns = reactive([
  {
    title: '序号',
    key: 'id',
    width: '60px',
    align: 'center',
    render: (_, index) => {
      return `${index + 1}`
    }
  },
  {
    title: '会员名称',
    key: 'name',
    width: '130px',
    fixed: 'left'
  },
  {
    title: '手机号',
    key: 'mobile',
    width: '130px',
    fixed: 'left'
  },
  {
    title: '性别',
    key: 'gender',
    width: '80px',
    render: (row) => {
      if(row.gender == 1){
        return '男'
      }else {
        return '女'
      }
    }
  },
  {
    title: '年龄',
    key: 'age',
    width: '80px',
  },
  {
    title: '生日',
    key: 'birthday',
    width: '100px',
    render: (row) => {
      if(!row.birthday){
        return '-'
      }
      return dateFormat(row.birthday, 'yyyy-MM-dd')
    }
  },
  {
    title: '微信',
    key: 'wechat',
    width: '150px',
  },
  {
    title: '会员等级',
    key: 'grade',
    width: '150px',
    render: (row) => {
      for(let i = 0;i < grades.length;i++){
        if(grades[i].value == row.grade){
          return grades[i].label
        }
      }
    }
  },
  {
    title: '状态',
    key: 'enabled',
    width: '80px',
    align: 'center',
    render: (row) => {
      if(row.enabled == 1) {
        return h(
            NTag,
            {
              type: 'success',
              size: 'small'
            },
            { default: () => '启用' }
        )
      }else{
        return h(
            NTag,
            {
              type: 'default',
              size: 'small'
            },
            { default: () => '禁用' }
        )
      }
    }
  },
  {
    title: '操作',
    key: 'enabled',
    fixed: 'right',
    width: '200px',
    render: (row) => {
      return [
        h(
            NButton,
            {
              type: 'primary',
              size: 'tiny',
              secondary: true,
              strong: true,
              onClick: () => handleToViewClick(row)//
            },
            { default: () => '详情' }
        ),
        h(NDivider,
            {
              vertical: true
            },
            null
        ),
        h(
            NButton,
            {
              type: 'warning',
              size: 'tiny',
              secondary: true,
              strong: true,
              onClick: () => handleToUpdateClick(row)
            },
            { default: () => '编辑' }
        ),
        h(NDivider,
            {
              vertical: true
            },
            null
        ),
        h(
            NButton,
            {
              type: 'error',
              size: 'tiny',
              secondary: true,
              strong: true,
              onClick: () => handleDeleteClick(row.id)
            },
            { default: () => '删除' }
        ),
        h(NDivider,
            {
              vertical: true
            },
            null
        ),
        h(NDropdown, {
          trigger: 'hover',
          options: [{
            label: '储值卡充值',
            key: '1',
          },{
            label: '记次卡充次',
            key: '2',
          },{
            label: '会员消费',
            key: '3',
          },{
            label: '加积分',
            key: '4',
          },{
            label: '减积分',
            key: '5',
          }],
          onSelect: (key) => handleSelectClick(key, row)
        },
            {default: () => '...'})
      ]
    }
  }
])

// 禁用时间
const birthdayDisabled = (datetime) => {
  return datetime > new Date().getTime()
}

const handleSelectClick = (key, row) => {
  switch (key){
    case '1'://储值卡充值
      crtMember.value.member = row;
      cardFormData.value.memberid = row.id;
      cardFormData.value.type = 1;
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-card-czk',
        event: 'event',
        data: row.id
      })
      showRechargeModal1.value = true;
      break;
    case '2':
      crtMember.value.member = row;
      cardFormData.value.memberid = row.id;
      cardFormData.value.type = 2;
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-card-jck',
        event: 'event',
        data: row.id
      })
      showRechargeModal2.value = true;
      break;
    case '3':

      break;
    case '4':
      loyaltyFormData.value.balance = 0
      crtMember.value.member = row;
      loyaltyFormData.value.memberid = row.id;
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-loyalty-detail',
        event: 'event',
        data: row.id
      })
      showAddLoyaltyModal.value = true;
      break;
    case '5':
      loyaltyFormData.value.balance = 0
      crtMember.value.member = row;
      loyaltyFormData.value.memberid = row.id;
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-loyalty-detail',
        event: 'event',
        data: row.id
      })
      showSubLoyaltyModal.value = true;
      break;
    default:
  }
}

//格式化时间
const format = (datetime) => {
  if(!datetime){
    return ''
  }
  return dateFormat(datetime, 'yyyy-MM-dd')
}
const parseCurrency = (input) => {
  const nums = input.replace(/(,|¥|\s)/g, "").trim();
  if (/^\d+(\.(\d+)?)?$/.test(nums))
    return Number(nums);
  return nums === "" ? null : Number.NaN;
}
const formatCurrency = (value) => {
  if (value === null)
    return "";
  return `¥ ${value}`;
}
//充值
const handleRechargeClick = () => {
  rechargeFormRef.value?.validate((errors) => {
    if (!errors) {
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-card-recharge',
        event: 'event',
        data: clone(cardFormData.value)
      })
    }
  })
}

//加积分
const handleAddLoyaltyClick = () => {
  loyaltyFormRef.value?.validate((errors) => {
    if (!errors) {
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-loyalty-add',
        event: 'event',
        data: clone(loyaltyFormData.value)
      })
    }
  })
}

//加积分
const handleSubLoyaltyClick = () => {
  loyaltyFormRef.value?.validate((errors) => {
    if (!errors) {
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'app-loyalty-sub',
        event: 'event',
        data: clone(loyaltyFormData.value)
      })
    }
  })
}

//详情
const handleToViewClick = (row) => {
  memberDetail.value = {}
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-member-view',
    event: 'event',
    data: row.id
  })
}

// 搜索
const handleSearchClick = () => {
  loadData()
}
// 分页
const handlePageChange = (page) => {
  searchForm.current = page
  loadData()
}
// 添加弹窗
const handleToAddClick = () => {
  modalTitle.value = '添加会员'
  operator.value = 'Add'
  formData.value = {
    name: '',
    gender: '1',
    age: 18,
    mobile: '',
    birthday: null,
    email: '',
    wechat: '',
    qq: '',
    grade: '',
    enabled: '1'
  }
  showModal.value = true
}
//编辑
const handleToUpdateClick = (row) => {
  modalTitle.value = '编辑会员'
  operator.value = 'Edit'
  formData.value = clone(row)
  formData.value.enabled += ''
  showModal.value = true
}
// 添加
const handleSaveClick = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      if(operator.value == 'Add'){
        window.electron.ipcRenderer.invoke("renderer-to-main", {
          name: 'app-member-add',
          event: 'event',
          data: clone(formData.value)
        })
      } else {
        window.electron.ipcRenderer.invoke("renderer-to-main", {
          name: 'app-member-update',
          event: 'event',
          data: clone(formData.value)
        })
      }
    }
  })
}

// 加载表格数据
const loadData = () => {
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-member-page',
    event: 'event',
    data: clone(searchForm)
  })
}
//加载会员等级
const loadGrades = () => {
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-memberlevel-all',
    event: 'event',
    data: {}
  })
}
// 删除
const handleDeleteClick = (id) => {
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-member-delete',
    event: 'event',
    data: id
  })
}

onMounted(() => {
  window.electron.ipcRenderer.on('main-to-renderer', (e, data) => {
    const event = data.data
    if(data.name === 'member-page-success'){
      tableData.value = event
    }else if(data.name === 'member-view-success'){//会员详情
      memberDetail = event
      showDetailModal.value = true
    }else if(data.name === 'card-detail-success'){//
      crtMember.value.card = event
      showDetailModal.value = false
    }else if(data.name === 'card-operator-success'){//充值/充次
      window.$message.success(event);
      showRechargeModal1.value = false
      showRechargeModal2.value = false
    }else if(data.name === 'loyalty-operator-success'){//
      window.$message.success(event);
      showAddLoyaltyModal.value = false
      showSubLoyaltyModal.value = false
    }else if(data.name === 'loyalty-detail-success'){//积分详情
      crtMember.value.loyalty = event
      console.log(crtMember.value)
    }else if(data.name === 'grade-all-success'){
      grades = event
    }else if(data.name === 'member-operator-success'){
      window.$message.success(event);
      showModal.value = false
      loadData()
    }
  })
  loadGrades()
  loadData()
})
</script>

<template>
  <n-space vertical>
    <div class="dreamer-search">
      <n-form inline :label-width="80" :model="searchForm" size="small">
        <n-form-item  label="会员名称" path="searchForm.name">
          <n-input v-model:value="searchForm.name" clearable placeholder="输入会员名称" />
        </n-form-item>
        <n-form-item  label="手机号" path="searchForm.mobile">
          <n-input v-model:value="searchForm.mobile" clearable placeholder="输入手机号" />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" attr-type="button" @click="handleSearchClick">
            <template #icon>
              <n-icon>
                <Search />
              </n-icon>
            </template>
            搜索
          </n-button>
        </n-form-item>
      </n-form>
    </div>
    <div class="dreamer-toolbar">
      <n-button type="primary" size="small" @click="handleToAddClick">添加</n-button>
    </div>
    <n-data-table :columns="columns" :data="tableData.records" size="small" striped bordered :scroll-x="1150" />

    <div class="dreamer-pagination">
      <n-pagination v-model:page="searchForm.current" :page-count="tableData.pages" :on-update:page="handlePageChange" />
    </div>
  </n-space>

  <!-- 添加/修改 -->
  <n-modal :title="modalTitle" v-model:show="showModal" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 500px">
    <n-form ref="formRef" :label-width="80" :model="formData" :rules="rules" size="small">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form-item label="会员名称" path="name">
            <n-input v-model:value="formData.name" placeholder="请输入会员名称" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="手机号" path="mobile">
            <n-input v-model:value="formData.mobile" placeholder="请输入手机号" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="会员等级" path="grade">
            <n-select v-model:value="formData.grade" :options="grades" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="性别" path="gender">
            <n-radio-group v-model:value="formData.gender" name="gendergroup">
              <n-space>
                <n-radio key="1" value="1">男</n-radio>
                <n-radio key="2" value="2">女</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="年龄" path="age">
            <n-input v-model:value="formData.age" placeholder="请输入年龄" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="生日" path="birthday">
            <n-date-picker v-model:value="formData.birthday" type="date" placeholder="请选择生日" :default-value="Date.now()" :is-date-disabled="birthdayDisabled" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="邮箱" path="email">
            <n-input v-model:value="formData.email" placeholder="请输入邮箱" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="微信" path="wechat">
            <n-input v-model:value="formData.wechat" placeholder="请输入微信" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="QQ" path="qq">
            <n-input v-model:value="formData.qq" placeholder="请输入QQ" />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="状态" path="enabled">
            <n-radio-group v-model:value="formData.enabled">
              <n-space>
                <n-radio label="启用" value="1" />
                <n-radio label="禁用" value="0" />
              </n-space>
            </n-radio-group>
          </n-form-item>
        </n-gi>
      </n-grid>

      <div class="dreamer-modal-footer">
        <n-space>
          <n-button type="default" size="small" attr-type="button" @click="showModal = false">取消</n-button>
          <n-button type="primary" size="small" attr-type="button" @click="handleSaveClick">保存</n-button>
        </n-space>
      </div>
    </n-form>
  </n-modal>

  <!-- 会员详情 -->
  <n-modal title="会员详情" v-model:show="showDetailModal" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 600px">
    <table border="0" cellpadding="0" cellspacing="0" class="detail-table">
      <tr>
        <th>会员名称</th>
        <td>{{memberDetail.member.name}}</td>
        <th>手机号</th>
        <td>{{memberDetail.member.mobile}}</td>
      </tr>
      <tr>
        <th>会员等级</th>
        <td>{{memberDetail.grade?.name}}</td>
        <th>性别</th>
        <td>
          <n-tag type="primary" size="small" v-if="memberDetail.member.gender == 1">男</n-tag>
          <n-tag type="error" size="small" v-else-if="memberDetail.member.gender == 2">女</n-tag>
          <n-tag type="default" size="small" v-else>未知</n-tag>
        </td>
      </tr>
      <tr>
        <th>年龄</th>
        <td>{{memberDetail.member.age}}</td>
        <th>生日</th>
        <td>{{format(memberDetail.member.birthday)}}</td>
      </tr>
      <tr>
        <th>邮箱</th>
        <td>{{memberDetail.member.email}}</td>
        <th>微信</th>
        <td>{{memberDetail.member.wechat}}</td>
      </tr>
      <tr>
        <th>QQ</th>
        <td>{{memberDetail.member.qq}}</td>
        <th>状态</th>
        <td>
          <n-tag type="primary" size="small" v-if="memberDetail.member.enabled == 1">启用</n-tag>
          <n-tag type="error" size="small" v-else>禁用</n-tag>
        </td>
      </tr>
      <tr>
        <th colspan="4" style="text-align: left">积分卡</th>
      </tr>
      <tr>
        <td colspan="4" style="text-align: left" v-if="memberDetail.loyalty">
          <div class="card-item">
            <h2>
              卡号：{{memberDetail.loyalty.cardno}}
            </h2>
            <div class="card-item-detail">
              <div class="">开卡日期：{{format(memberDetail.loyalty.opendate)}}</div>
              <div>
                <div>
                  剩余积分：<span style="padding: 0 5px;font-size: 18px; font-weight: bold; color: #cc3344;">{{memberDetail.loyalty.balance.toFixed(0)}}</span>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td colspan="4" style="text-align: left" v-else>
          <n-empty description="暂无积分卡信息" />
        </td>
      </tr>
      <tr>
        <th colspan="4" style="text-align: left">储值卡/记次卡</th>
      </tr>
      <template v-if="!memberDetail.cards || memberDetail.cards.length <= 0">
        <tr>
          <td colspan="4" style="text-align: left">
            <n-empty description="暂无会员卡信息" />
          </td>
        </tr>
      </template>
      <template v-else>
        <tr v-for="item in memberDetail.cards">
          <td colspan="4" style="text-align: left">
            <div class="card-item">
              <h2>
                卡号：{{item.cardno}}&nbsp;
                <n-tag type="error" size="small" v-if="item.type == 1">储值卡</n-tag>
                <n-tag type="warning" size="small" v-else-if="item.type == 2">记次卡</n-tag>
              </h2>
              <div class="card-item-detail">
                <div class="">开卡日期：{{format(item.opendate)}}</div>
                <div>
                  <div v-if="item.type == 1">
                    卡内余额：<span style="padding: 0 5px;font-size: 18px; font-weight: bold; color: #cc3344;">￥{{item.balance.toFixed(2)}}</span>
                  </div>
                  <div v-if="item.type == 2">
                    剩余次数：<span style="padding: 0 5px;font-size: 18px; font-weight: bold; color: #cc3344;">{{item.balance.toFixed(0)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </template>
    </table>
    <div class="dreamer-modal-footer">
      <n-space>
        <n-button type="primary" size="small" attr-type="button" @click="showDetailModal = false">确定</n-button>
      </n-space>
    </div>
  </n-modal>

  <!-- 储值卡充值 -->
  <n-modal title="储值卡充值" v-model:show="showRechargeModal1" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 500px">
    <n-form ref="rechargeFormRef" :label-width="80" :model="crtMember" size="small">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form-item label="会员名称" path="name">
            {{crtMember.member.name}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="手机号" path="mobile">
            {{crtMember.member.mobile}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="会员卡号">
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-if="!crtMember.card">
              暂未开卡
            </div>
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-else>
              {{crtMember.card?.cardno}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="卡内余额">
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-if="!crtMember.card">
              -
            </div>
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-else>
              ￥{{crtMember.card?.balance.toFixed(2)}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="充值金额" path="amount">
            <n-input-number
                v-model:value="cardFormData.balance"
                :default-value="0"
                :parse="parseCurrency"
                :format="formatCurrency"
                :validator="(x: number) => x > 0"
            />
          </n-form-item>
        </n-gi>
      </n-grid>

      <div class="dreamer-modal-footer">
        <n-space>
          <n-button type="default" size="small" attr-type="button" @click="showRechargeModal1 = false">取消</n-button>
          <n-button type="primary" size="small" attr-type="button" @click="handleRechargeClick">充值</n-button>
        </n-space>
      </div>
    </n-form>
  </n-modal>

  <!-- 记次卡充次 -->
  <n-modal title="记次卡充次" v-model:show="showRechargeModal2" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 500px">
    <n-form ref="rechargeFormRef" :label-width="80" :model="crtMember" size="small">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form-item label="会员名称" path="name">
            {{crtMember.member.name}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="手机号" path="mobile">
            {{crtMember.member.mobile}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="会员卡号">
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-if="!crtMember.card">
              暂未开卡
            </div>
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-else>
              {{crtMember.card?.cardno}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="剩余次数">
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-if="!crtMember.card">
              -
            </div>
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-else>
              {{crtMember.card?.balance.toFixed(0)}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="充值次数" path="amount">
            <n-input-number
                v-model:value="cardFormData.balance"
                :default-value="0"
                :parse="parseCurrency"
                :validator="(x: number) => x > 0"
            />
          </n-form-item>
        </n-gi>
      </n-grid>

      <div class="dreamer-modal-footer">
        <n-space>
          <n-button type="default" size="small" attr-type="button" @click="showRechargeModal1 = false">取消</n-button>
          <n-button type="primary" size="small" attr-type="button" @click="handleRechargeClick">充值</n-button>
        </n-space>
      </div>
    </n-form>
  </n-modal>

  <!-- 加积分 -->
  <n-modal title="加积分" v-model:show="showAddLoyaltyModal" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 500px">
    <n-form ref="loyaltyFormRef" :label-width="80" :model="crtMember" size="small">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form-item label="会员名称" path="name">
            {{crtMember.member.name}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="手机号" path="mobile">
            {{crtMember.member.mobile}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="积分卡号">
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-if="!crtMember.loyalty">
              暂未开卡
            </div>
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-else>
              {{crtMember.loyalty?.cardno}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="剩余积分">
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-if="!crtMember.loyalty">
              -
            </div>
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-else>
              {{crtMember.loyalty?.balance.toFixed(0)}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="加积分" path="amount">
            <n-input-number
                v-model:value="loyaltyFormData.balance"
                :default-value="0"
                :parse="parseCurrency"
                :validator="(x: number) => x > 0"
            />
          </n-form-item>
        </n-gi>
      </n-grid>

      <div class="dreamer-modal-footer">
        <n-space>
          <n-button type="default" size="small" attr-type="button" @click="showAddLoyaltyModal = false">取消</n-button>
          <n-button type="primary" size="small" attr-type="button" @click="handleAddLoyaltyClick">保存</n-button>
        </n-space>
      </div>
    </n-form>
  </n-modal>

  <!-- 减积分 -->
  <n-modal title="减积分" v-model:show="showSubLoyaltyModal" :mask-closable="false" :show-icon="false" preset="dialog" size="small" style="width: 500px">
    <n-form ref="loyaltyFormRef" :label-width="80" :model="crtMember" size="small">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form-item label="会员名称" path="name">
            {{crtMember.member.name}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="手机号" path="mobile">
            {{crtMember.member.mobile}}
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="积分卡号">
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-if="!crtMember.loyalty">
              暂未开卡
            </div>
            <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-else>
              {{crtMember.loyalty?.cardno}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="剩余积分">
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-if="!crtMember.loyalty">
              -
            </div>
            <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-else>
              {{crtMember.loyalty?.balance.toFixed(0)}}
            </div>
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="减积分" path="amount">
            <n-input-number
                v-model:value="loyaltyFormData.balance"
                :default-value="0"
                :parse="parseCurrency"
                :validator="(x: number) => x > 0"
            />
          </n-form-item>
        </n-gi>
      </n-grid>

      <div class="dreamer-modal-footer">
        <n-space>
          <n-button type="default" size="small" attr-type="button" @click="showSubLoyaltyModal = false">取消</n-button>
          <n-button type="primary" size="small" attr-type="button" @click="handleSubLoyaltyClick">保存</n-button>
        </n-space>
      </div>
    </n-form>
  </n-modal>
</template>

<style scoped lang="less">
:deep(.n-form-item-label){
  color: #333333 !important;
}
.detail-table{
  width: 100%;
  border-left: #e2e2e2 solid 1px;
  border-top: #e2e2e2 solid 1px;
  line-height: 30px;
  margin-bottom: 15px;
  .card-item{
    background-color: #e7f5ee;
    border: #18a058 dashed 2px;
    border-radius: 8px;
    margin: 10px 5px;
    padding: 0 10px;
    h2{
      font-size: 16px;
      line-height: 40px;
      display: flex;
      align-items: center;
      border-bottom: #fff dashed 2px;
    }
    .card-item-detail{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
    }
  }
}
.detail-table th{
  background-color: #f5f5f5;
  text-align: right;
}
.detail-table th, .detail-table td{
  padding: 0 5px;
  border-right: #e2e2e2 solid 1px;
  border-bottom: #e2e2e2 solid 1px;
}
</style>
